<!DOCTYPE html>
{% load i18n %}
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="shortcut icon" type="image/png" href="/static/favicon.ico"/>
    <link rel="apple-touch-icon" href="/static/apple-touch-icon.png">
    {% include 'show/link.html' %}

    <title>{% trans '个人信息' %}</title>
    <style>
        .main_body {
            min-height: 700px;
        }
        .this-fs {
            font-size: 12px;
        }

        .icon {
            color:#0e75ee
        }


        .person .panel-heading-title {
            font-size:18px;
            padding:20px 20px 20px 20px;
            border-bottom:1px solid #f1f1f1
        }
        .person .panel-body {
            font-size:14px;
        }
        /*---------------------*/

        .person {
            margin-bottom: 20px;
            background-color: #fff;
            border: 1px solid transparent;
            border-radius: 4px;
            -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
            box-shadow: 0 1px 1px rgba(0,0,0,.05);
        }
        .info-heading{
            padding: 10px 15px;
            border-bottom: 1px solid transparent;
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
        }
        .info-title{
            font-size: 18px;
            padding: 20px 20px 20px 20px;

        }
        .person-info-title{
            border-bottom: 1px solid #f1f1f1;
        }
        .info-content{
            padding-top:13px;
            margin-bottom: 20px;
        }
        .img-l{
            padding: 0px;
            margin: 0px;
        }
        .img-r{
            margin: 0px;
            padding: 0px 0px 0px 50px;
        }
        .person-img{
            padding-left: 80px;
            height: 50px;
        }
        .person-img li{
            float:left;
        }
        .li-div{
            min-width: 115px;
            margin-left: 20px;
            padding-bottom: 10px;
        }

        .step-info{
            border-left: 1px solid #f1f1f1;
            padding-top: 15px;
            padding-bottom: 15px;
        }
        .step-info li{
            float: left;
            padding-left: 30px;
            font-size: 16px;

        }
        .vc-i i{
            width: 18px;
            height: 18px;
            margin-right: 3px;
            vertical-align: middle;
        }
        .step-info .active i{
            content: url("/static/images/active.png");
        }
        .step-info .notactive i{
            content: url("/static/images/notactive.png");
        }
        .step-info .pcactive i{
            content: url("/static/images/pcactive.png");
        }
        .vc-i span{
            vertical-align: middle;
        }
        .inv-l{
            font-size: 16px;
            padding-left: 68px;
            color: #c0c0c0;
            padding-right: 0px;
        }
        .inv-link{
            min-height: 120px;
            background: #f5f5f5;
            margin: 40px 130px 0px 40px;
            padding: 20px 70px;
            font-size: 16px;
        }
        .inv-code{
            padding: 13px 0px;
        }
        .inv-link-content{

        }
        .inv-link-content input{
            border: none;
            background: none;

        }
        .inv-link-content a{
            color: #3f8aeb;
        }
        .log-tb{
            padding-left: 70px;
        }
        #deposites thead{
            border: 0px;
        }
        #deposites th{
            background: #ffffff;
            border: 0px;
            font-size: 16px;
            color: #969696;
            line-height: 32px;
        }
        #deposites td{
            border: 0px;
            line-height:32px;
            font-size: 16px;
            color: #bfbfbf;
        }

    </style>

    <script>
        $(document).ready(function() {
            $("#userinfo").addClass("active");
        })

        function myFunction() {
            var copyText = document.getElementById("copy_data");
            copyText.select();
            document.execCommand("Copy");
            alert("{% trans '复制成功' %}");
        }
    </script>
</head>

<body>
{% include 'show/top_bar.html' %}
<div class="main_body">
    <br>
    <div class="container">
        {% include 'userinfo/sider.html' %}
        <div class="col-md-10 main-left this-fs f-pz person">
            <div class="info-box person-info">
                <div class="info-heading">
                    <div class="info-title person-info-title">
                        {% trans '个人信息' %}
                    </div>
                </div>
                <div class="info-content">
                    <div class="col-sm-4 img-l">
                        <ul class="person-img">
                            <li><img src="\static\images\person-img.png" /></li>
                            <li>
                                <div class="li-div">{{user.email}}</div>
                                <div class="li-div">
                                    <div class="progress" style="height:5px">
                                        <div class="progress-bar" style="width:40%;height:5px"></div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="col-sm-8 img-r">
                        <ul class="step-info">
                            <li class="vc-email vc-i active"><i></i><span>{% trans '邮箱激活'%}</span></li>
                            <li class="vc-phone vc-i active"><i></i><span>{% trans '手机验证'%}</span></li>
                            <li class="vc-google vc-i notactive"><i></i><span>{% trans '谷歌两步验证'%}</span></li>
                            <li class="vc-name vc-i notactive"><i></i><span>{% trans '实名认证'%}</span></li>
                            <!--
                            <li class="vc-name vc-i pcactive"><i></i><span>{% trans '实名认证'%}</span></li>
                            -->
                            <div class="clear"></div>
                        </ul>
                    </div>

                    <div class="clear"></div>
                </div>
            </div>
            <div class="innvitation">
                <div class="info-heading">
                    <div class="info-title person-info-title">
                        {% trans '邀请详情'%}
                    </div>
                </div>
                <div class="info-content">
                    <div class="innvitation-level">
                        <div class="col-sm-4 inv-l">{% trans '直接推荐人数:'%}<span>{{count1}}</span></div>
                        <div class="col-sm-4 inv-l">{% trans '间接推荐人数:'%}<span>{{count2}}</span></div>
                        <div class="col-sm-4 inv-l">{% trans '三级推荐人数:'%}<span>{{count3}}</span></div>
                        <div class="clear"></div>
                    </div>
                    <div class="inv-link">
                        <div class="inv-code">
                            <span>{% trans '邀请码' %}:</span><span> {{user.id}} </span>
                        </div>
                        <div class="inv-link-content">
                            <span>{% trans '邀请链接' %} :</span>
                            <input type="text" value="http://NiuBiEX.com{% url 'invite' %}?r={{user.id}}" size="30" id="copy_data">
                            <a href="javascript:void(0);" onclick="myFunction()">{% trans '复制链接' %}</a>
                            <!--<button type="button" onclick="myFunction()"><i class="fa fa-copy"></i>{% trans '复制链接' %}</button>-->
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
            <!--
            <div class="log-record">
                <div class="info-heading">
                    <div class="info-title">
                        {% trans '最近登录'%}
                    </div>
                </div>
                <div class="info-content log-tb">
                    <table id="deposites" class="table table-hover ">
                        <thead>
                        <tr >
                            <th>{% trans '登录时间'%}</th>
                            <th>{% trans '登录ip'%}</th>
                            <th>{% trans '登录地点'%}</th>
                        </tr>
                        </thead>
                        <tbody class="svg_green green">
                        <tr >
                            <td >2018.03.10 12:30</td>
                            <td >127.0.0.1</td>
                            <td >广州</td>
                        </tr>
                        <tr >
                            <td >2018.03.10 12:30</td>
                            <td >127.0.0.1</td>
                            <td >广州</td>
                        </tr>
                        <tr >
                            <td >2018.03.10 12:30</td>
                            <td >127.0.0.1</td>
                            <td >广州</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            -->
        </div>
    </div>
</div>
{% include 'show/footer.html' %}
</body>
</html>
